<template>

	<view>

		<view style="margin-top: 50rpx;"  :class="oneClass">

			<view style="width: 80%; margin: 0 auto;">
				<register-input title="姓名" @changeValue="changeName" :value="name"></register-input>
			</view>

			<view style="width: 80%; margin: 0 auto;">
				<register-input title="身份证" @changeValue="changeIdentity" :value="identity"></register-input>
			</view>

			<view style="width: 80%; margin: 0 auto;">
				<register-input title="住址" @changeValue="changePaddress" :value="paddress"></register-input>
			</view>

			<view style="width: 80%; margin: 0 auto;">
				<register-input title="密码" :password="true" @changeValue="changePnation" :value="pnation"></register-input>
			</view>
<<<<<<< HEAD
			
			<view style="width: 80%; margin: 0 auto;">
				<register-input title="确认密码" :password="true"  :value="pnation"></register-input>
=======

			<view style="width: 80%; margin: 0 auto; ">
				<view style="display: flex; width: 90%; margin: 0 auto;">
					<view style="line-height: 100rpx; width: 30%; font-size: 35rpx; color: #808080;">性别</view>
					<view @tap="changeSex(sexCurrent)" style="display: flex; position: relative; margin: 10rpx; border-radius: 40rpx; width: 200rpx; height: 80rpx; background-color: #C8C7CC;">
						<view :class="tagClass" style="position: absolute; text-align: center; font-size: 20rpx; height: 80rpx; width: 110rpx;background-color: #02C9FC;line-height: 60rpx; border-radius: 40rpx;"></view>
						<view style="z-index: 1005; width: 110rpx; text-align: center;">
							<text :style="'color: '+sColor+' ;'" style=" font-weight: 800; font-size: 30rpx; line-height: 80rpx;">男</text>
						</view>

						<view style="z-index: 1005; width: 110rpx; text-align: center; transform: translate(-20rpx 0);">
							<text :style="'color: '+rColor+' ;'" style="font-weight: 800; font-size: 30rpx; line-height: 80rpx;">女</text>
						</view>

					</view>
				</view>
				<view style="height: 1px; background-color: #9EABB2; width: 100%; margin: 0 auto;"></view>
>>>>>>> parent of 9c00801 (2.0 老人，管理员，新的ui)
			</view>
			
			<view @tap="toNext" class="button">
				<icon style="line-height: 130rpx; font-size: 40rpx; transform: rotate(-45deg); color: #FFFFFF; font-weight: 1000;"
				 class="icon-jiantou iconfont"></icon>
			</view>
		</view>
	</view>
</template>

<script>
	import registerInput from "@/components/ui/myRegisterInput.vue"
	import evenRadio from "@/components/evan-radio/evan-radio.vue"
	import evenRadioGroup from "@/components/evan-radio-group/evan-radio-group.vue"
	import url from "../../common/config/config.js"

	import {
		Encrypt
	} from '../../static/util/crypto.js'

	export default {
		components: {
			registerInput,
			evenRadio,
			evenRadioGroup
		},
		data() {
			return {
				isToNext: false,
				cunIndex: 0,
				pnation: '',
				password: '',
				okword: '',
				tagClass: '',
				name: '',
				phone: '',
				identitySrc: '',
				rColor: '#02C9FC',
				sColor: '#FFFFFF',
				paddress: '',
				identity: '',
				sexCurrent: 0,
				sex: ['女', '男'],
				page: 0,
				psex: '女',
				oneClass: 'oneIn',
				twoClass: 'initial',
				index: 0,
				content: [{
					name: '请先识别身份证'
				}],
				cunList: [{
					name: '请先选择城镇乡街道'
				}]
			}
		},
		computed: {
			// 计算属性的 getter
			isOne: {
				get: function() {

					return this.page
				},
				set: function(newDate) {

					if (newDate == 0) {
						this.oneClass = 'oneIn'
						this.twoClass = 'oneOut'
					} else {
						this.oneClass = 'oneOut'
						this.twoClass = 'oneIn'
					}
					setTimeout(() => {
						this.page = newDate
					}, 2000)
				}
			}
		},
		methods: {
			changePass(e) {
				this.password = e.detail.value
			},
			changeOkPass(e) {
				this.okword = e.detail.value
			},
			changeName(e) {
				console.log(e)
				this.name = e.newDate
			},
			changePhone(e) {
				this.phone = e.detail.value
			},
			async register() {
				var that = this
				var ids = that.cunList[that.cunIndex].villageId;
				var data = {
					"townId": that.content[that.index].townId,
					"villageId": ids,
					"username": that.identity,
					"nickName": that.name,
					"cardNo": that.identity,
					"userAddress": that.paddress,
					"userPlace": that.paddress,
					"phone": that.phone,
					"password": that.password
				}
				console.log(data)

				if (that.password == that.okword && that.password != '' && that.phone != '') {
					try {
						var res = await that.$api.register(data);
						if(res.data.code == 302){
							uni.showModal({
								title: '提示',
								content: '该用户已注册！',
								success: function(res) {
									uni.navigateBack();
								}
							});
						}else{
							uni.showModal({
								title: '提示',
								content: '注册成功',
								success: function(res) {
									uni.navigateBack();
								}
							});
						}
						
						
					} catch (e) {
						//TODO handle the exception
						console.log(e)
						uni.showModal({
							title: '提示',
							content: '注册失败',
							success: function(res) {
							}
						});
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '两次输入密码不一致',
						success: function(res) {
							if (res.confirm) {
								console.log('用户点击确定');
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
				console.log(data)
			},
			changeSex(sex) {
				if (sex == 0) {
					this.sexCurrent = 1
					this.tagClass = 'toRound'
					this.showTag = "圆形"
					this.sColor = "#02C9FC"
					this.rColor = "#FFFFFF"
				} else {
					this.sexCurrent = 0
					this.tagClass = 'toSquare'
					this.showTag = "圆形"
					this.rColor = "#02C9FC"
					this.sColor = "#FFFFFF"
				}
			},
			changePnation(e) {
				this.pnation = e.newDate
			},
			changeCun(e) {
				console.log(e.detail.value)
				this.cunIndex = e.detail.value
			},
			async changeContent(e) {
				var that = this
				console.log(e.detail.value)
				this.index = e.detail.value

				console.log(that.content[that.index].townId)

				//获取村号

				var res = await this.$api.Cun({
					"page": 0,
					"size": 9999,
					"enabled": true,
					"sort": "villageId,asc",
					"townId": that.content[that.index].townId
				});

				this.cunList = res.data.content

				console.log(res)

			},
			changePaddress(e) {
				console.log(e)
				this.paddress = e.newDate
			},
			changeIdentity(e) {
				this.identity = e.newDate
			},
			test() {
				console.log(this.value)
			},
			async toNext() {
				var that = this
				if (this.isOne == 0) {
					if (this.isToNext) {
						try{
							//获取街道
							var townList = await that.getTown();
							
							that.content = townList.data.content
							
							var res = await this.$api.Cun({
								"page": 0,
								"size": 9999,
								"enabled": true,
								"sort": "villageId,asc",
								"townId": that.content[that.index].townId
							});
							
							this.cunList = res.data.content
							
							console.log(that.identity.substr(0, 6) + '000')
							
							
							this.isOne = 1
							console.log(1)
						}catch(e){
							//TODO handle the exception
							uni.showToast({
								title:'请输入正确身份证号',
								icon:'loading'
							})
						}
					} else {
						uni.showToast({
							title: '请先拍摄身份证',
							icon: 'none'
						})
					}
				} else {
					this.isOne = 0
					console.log(2)
				}

			},
			async getTown() {
				var that = this
				
				return await that.$api.getTown({
					"page": 0,
					"size": 9999,
					"enabled": true,
					"sort": "townId,asc",
					"countyId": that.identity.substr(0, 6) + '000'
				})
			},
			chooseIdentity() {
				var that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: function(res) {
						console.log(url)
						// console.log(JSON.stringify(res.tempFilePaths));
						console.log(url)
						that.identitySrc = res.tempFilePaths[0]
						uni.showLoading({
							title: '加载中'
						});
						
						//解析图片
						var iddd = setTimeout(()=>{
							uni.hideLoading();
							uni.showModal({
								title:"提示",
								content:"当前访问人数较多，请稍后重试",
								success: () => {
									uni.navigateBack();
									console.log(that.urll)
								}
							})
						},7000)
						
						
						uni.uploadFile({
							url: url+ '/api/app/getIdCardInfoByPic/', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0],
							name: 'pic',
							success: async (uploadFileRes) => {
								clearTimeout(iddd)
								var data = JSON.parse(uploadFileRes.data).result;
								console.log(data);
								that.identity = data.pidcardnumber
								that.pnation = data.pnation
								that.paddress = data.paddress
								that.name = data.pname
								if (data.psex == '女') {
									that.changeSex(0)
								} else {
									that.changeSex(1)
								}
								that.isToNext = true
								uni.hideLoading();

								
							},
							fail: (res) => {
								uni.showToast({
									icon: "none",
									title: '网络异常请重新上传'
								});
								uni.hideLoading();
								console.log(res)
							}
						});

					}
				});
			}
		}
	}
</script>

<style>
	.toSquare {
		animation: toRoundAni 0.2s;
		animation-fill-mode: forwards;
	}

	.toRound {

		animation: toSquareAni 0.2s;
		animation-fill-mode: forwards;
	}

	@keyframes toSquareAni {
		from {
			transform: translate(0rpx, 0);
		}

		to {
			transform: translate(90rpx, 0);
		}
	}

	@keyframes toRoundAni {
		from {
			transform: translate(90rpx, 0);
		}

		to {
			transform: translate(0rpx, 0);
		}
	}

	.initial {
		transform: translate(100%, 0);
	}

	.oneOut {
		animation: out 1.5s;
		animation-fill-mode: forwards;
	}

	.oneIn {
		animation: in 1.5s;
		animation-fill-mode: forwards;
	}

	@keyframes in {
		0% {
			transform: scale(0.9, 0.9) translate(100%, 0);
		}

		50% {
			transform: scale(0.9, 0.9) translate(0, 0);
		}

		100% {
			transform: scale(1, 1) translate(0, 0);
		}
	}

	@keyframes out {
		0% {
			transform: scale(1, 1) translate(0, 0);
		}

		50% {
			transform: scale(0.9, 0.9) translate(0, 0);
		}

		100% {
			transform: scale(0.9, 0.9) translate(-100%, 0);
		}
	}

	.button {
		background: linear-gradient(to right, #36A5FF, #02C9FC, #36A5FF);
		transform: rotate(45deg);
		animation: bgcChange 3s;
		animation-iteration-count: infinite;
		text-align: center;
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		margin: 140rpx auto;
	}

	@keyframes bgcChange {
		0% {}

		100% {
			background-position: 130rpx 0;
		}
	}
</style>
